<!-- 子组件的卡片 -->
<template>
  <div class="card">
      <div class="header">
            <img
            src="@/assets/icon1/sixin.svg"
            alt="私信"
            title="私信"
            style="width:30px;"
            id="sixin"
          >
      </div>
      <div class="mess">
          <img src="@/images/icon.jpg" width="60px" height="60px" id="touxiang">
          <span>ice</span>
          
         
         <el-button type="warning" plain v-if="dingyue"
         size="mini" @click.prevent="handleDY">订阅</el-button>
          <el-button type="info" plain
          size="mini" v-else @click.prevent="handleDY">已订阅</el-button>
     
      </div>
      <div class="fans-focus">
          <span>关注:199人</span>
          <span>/</span>
          <span>粉丝:200人</span>
          <span>/</span>
          <span>广州市</span>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        dingyue:false,
    };
  },

  methods: {
       handleDY(){
          this.dingyue=!this.dingyue
      }
  }
}

</script>
<style lang='scss' scoped>
.card{
   

    width: 300px;

    
    .header{
         height: 120px;
        background-image:  url("../images/4.png");
        background-size: 100% auto;
        background-position: fixed;
         #sixin {
          float:right;
          margin-top:80px;
          margin-right:10px;
          cursor: pointer;
          transition: all 0.6s;
        }
        #sixin:hover {
          transform: scale(1.4);
        }  
    }
    .mess{
        margin-top:10px;
        #touxiang{
            float:left;
            border-radius: 50%;
            margin-top:-40px;
            margin-left:20px;
        }
        span{
            font-size: 18px;
            letter-spacing: 3px;
            font-weight: bold;
            margin-left:20px;
        }
        .el-button{
            float:right;
            margin-right:10px;
        }
    }
    .fans-focus{
        display:flex;
        justify-content:space-between;
        margin:10px 10px;
        font-size: 14px;
        letter-spacing: 2px;
        margin:20px 10px;
        color:#939099;
    }
}
</style>